<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手写ajax请求函数</title>
</head>
<body>
<button onclick="testGet()">发送GET请求</button>
<br>
<button onclick="testPost()">发送POST请求</button>
<br>
<button onclick="testPut()">发送PUT请求</button>
<br>
<button onclick="testDelete()">发送Delete请求</button>
<br>

<script src="../lib/JustMicrobundle.umd.js"></script>
<script>
    const {axios} = JustMicrobundle

    /* 1. GET请求: 从服务器端获取数据*/
    function testGet() {
        axios({
            // url: 'http://localhost:3000/posts',
            url: 'https://www.httpbin.org/anything',
            method: 'GET',
            params: {
                id: 1,
                xxx: 'abc'
            }
        })
            // axios.get('http://localhost:3000/posts', {params: {id: 1}})
            .then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
    }

    /* 2. POST请求: 服务器端保存数据*/
    function testPost() {
        axios({
            url: 'https://www.httpbin.org//anything',
            method: 'POST',
            data: {
                "title": "json-server---",
                "author": "typicode---"
            }
        })
            // axios.post('http://localhost:3000/posts', {title: 'aaa', author: 'bbb'})
            .then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
    }

    /* 3. PUT请求: 服务器端更新数据*/
    function testPut() {
        axios({
            url: 'https://www.httpbin.org/anything',
            method: 'put',
            data: {
                "title": "json-server+++",
                "author": "typicode+++"
            }
        })
            // axios.put('http://localhost:3000/posts/1', {title: 'aaa222', author: 'bbb222'})
            .then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
    }

    /* 2. DELETE请求: 服务器端删除数据*/
    function testDelete() {
        axios({
            url: 'https://www.httpbin.org/anything',
            method: 'delete'
        })
            // axios.delete('http://localhost:3000/posts/2')
            .then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
    }
</script>

</body>
</html>
